<template>
    <div>
        <h1 style="width: 100%;font-size: 30px;">请假审批</h1>
            <el-tabs type="border-card" class="demo-tabs">
                <el-tab-pane>
                    <template #label>
                        <span class="custom-tabs-label">
                        <span>未审批</span>
                        </span>
                    </template>
                    <el-table :data="tableData" border style=" width:100%">
                        <el-table-column prop="user.name" label="员工" />
                        <el-table-column prop="typeName.nameType" label="请假类型" />
                        <el-table-column prop="startTime" label="请假开始时间" />
                        <el-table-column prop="endTime" label="请假结束时间" />
                        <el-table-column prop="time" label="请假时长" />
                        <el-table-column prop="creatTime" label="申报时间"/>
                        <el-table-column fixed="right" label="操作" width="200">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="kai(scope.row)">
                                查看
                            </el-button>         
                        </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane>
                    <template #label>
                        <span class="custom-tabs-label">
                        <span>已审批</span>
                        </span>
                    </template>
                    <el-table :data="tableData2" border style=" width:100%">
                        <el-table-column prop="user.name" label="员工" />
                        <el-table-column prop="typeName.nameType" label="请假类型" />
                        <el-table-column prop="startTime" label="请假开始时间" />
                        <el-table-column prop="endTime" label="请假结束时间" />
                        <el-table-column prop="time" label="请假时长" />
                        <el-table-column prop="creatTime" label="申报时间"/>
                        <el-table-column  label="状态">
                            <template #default="scope">
                                <el-tag type="success" v-show="scope.row.status==2">已批准</el-tag>
                                <el-tag type="danger" v-show="scope.row.status==3">已拒绝</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="200">
                            <template #default="scope">
                                <el-button type="primary" size="small" @click="kai(scope.row)">
                                    查看
                                </el-button>         
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
    </div>
    <el-dialog v-model="dialogFormVisible" :title="pd?'审批':'查看'" width="500">
    <el-form :model="form">
        <el-form-item label="请假人：" :label-width="100">
            {{ form.user.name }}<span style="width: 30%;"></span>请假类型：{{ form.typeName.nameType }}
        </el-form-item>
        <el-form-item label="请假时间：" :label-width="100">
            {{form.startTime}}————{{ form.endTime }}
        </el-form-item>
        <el-form-item label="请假时长：" :label-width="100">
            {{ form.time }}
        </el-form-item>
        <el-form-item label="请假原因：" :label-width="100" class="content">
            <div v-html="form.content"></div>
        </el-form-item>
        <el-form-item label="批注：" :label-width="100" v-show="!pd&&pdcomment">
            {{form.remark}} <span style="width: 40%;"></span>审批人：{{ form.user1?form.user1.name:''}}
        </el-form-item>
        <el-form-item label="批注：" :label-width="100" v-show="pd">
            <el-input v-model="form.remark"/>
        </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="guan">取消</el-button>
        <el-button type="danger" @click="xiugai(3)" v-show="pd">
          拒绝
        </el-button>
        <el-button type="primary" @click="xiugai(2)" v-show="pd">
          通过
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import { selectWeekendBy,updateStatusById } from '@/api/weekend';
import { ref,onMounted } from 'vue';
import { useUserStore } from '@/stores/user';
import { ElMessage } from 'element-plus';
import router from '@/router';
const userstore=useUserStore()
const user=userstore.user
const dialogFormVisible=ref(false)
let form = {}
let pd=false
let pdcomment=false
const kai=((value)=>{
    dialogFormVisible.value = true
    form=value
    pd=(form.status==1)
    pdcomment=(form.remark!=null)
})
const guan=(()=>{
    dialogFormVisible.value = false
})
const xiugai=(async(value)=>{
    form.status=value
    form.updateBy=user.id
    if(await updateStatusById(form)){
        guan()
        setTimeout(router.go(0),500)
    }else{
        ElMessage.error("审批失败")
    }
})
const tableData=ref(null)
const tableData2=ref(null)
const select=(async()=>{
    let response={}
    response=await selectWeekendBy(1);
    tableData.value= response.data.data
    response=await selectWeekendBy(10);
    tableData2.value= response.data.data
})
onMounted(()=>{
    select()
})
</script>

<style lang="scss" scoped>
    .demo-tabs > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }
    .demo-tabs .custom-tabs-label .el-icon {
        vertical-align: middle;
    }
    .demo-tabs .custom-tabs-label span {
        vertical-align: middle;
        margin-left: 4px;
    }
</style>